<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="../header.jsp"%>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form id="formId"  class="layui-form layui-form-pane" action="">
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品名</label>
	    <div class="layui-input-block">
	      <input type="text" name="name" autocomplete="off" placeholder="请输入商品名" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品副标题</label>
	    <div class="layui-input-block">
	      <input type="text" name="subtitle" autocomplete="off" placeholder="请输入商品副标题" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">请选择分类</label>
	    <div class="layui-input-inline">
	      <select name="" lay-filter="filter">
	        <option value="">请选择一级分类 </option>
	      	<c:forEach items="${topCategoryList}" var="category">
	      		<option value="${category.id}">${category.name}</option>
	      	</c:forEach>
	      </select>
	    </div>
	    <div class="layui-input-inline">
	      <select id="categoryId" name="categoryId">
	        <option value="">请选择一级分类 </option>
	        <option value="1">浙江省</option>
	        <option value="2">江西省</option>
	        <option value="3">福建省</option>
	      </select>
	    </div>
	   </div>
	   <div class="layui-form-item">
	     <label class="layui-form-label">商品价格</label>
	     <div class="layui-input-inline">
	       <input type="text" name="price" autocomplete="off" placeholder="请输入商品价格" class="layui-input">
	     </div>
	   </div>
	   <div class="layui-form-item">
	     <label class="layui-form-label">商品库存</label>
	     <div class="layui-input-inline">
	       <input type="text" name="stock" autocomplete="off" placeholder="请输入商品库存" class="layui-input">
	     </div>
	   </div>
	   <div class="layui-form-item" pane="">
	    <label class="layui-form-label">单选框</label>
	    <div class="layui-input-inline">
	      <input type="radio" name="status" value="1" title="上架" checked="">
	      <input type="radio" name="status" value="2" title="下架">
	    </div>
	   </div>
	   <div class="layui-form-item" pane="">
	    <label class="layui-form-label">商品主图</label>
	    <div class="layui-input-inline">
			  <div class="layui-upload-list">
			  	<input type="hidden" name="mainImage" />
			    <img class="layui-upload-img" id="mainImageId" width="150px" height="150px">
			    <p id="demoText"></p>
			  </div>
	    	  <button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
	    </div>
	   </div>
		
	   <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">商品详情</label>
	    <div class="layui-input-block">
	      <textarea placeholder="请输入内容" id="detailId" name="detail" class="layui-textarea"></textarea>
	    </div>
	  </div>
	  <input  type="button" class="layui-btn" value="添加" onclick="submitForm()">
	</form>
	
	<script type="text/javascript" src="${path}/resources/kindeditor/kindeditor.js"></script>
	<script type="text/javascript" src="${path}/resources/kindeditor/lang/zh_TW.js"></script>
	<script type="text/javascript">
		layui.use(['form', 'laydate', 'upload'], function() {
			var form = layui.form;
			var laydate = layui.laydate;
			var upload = layui.upload;
			
			  //普通图片上传
			  var uploadInst = upload.render({
			    elem: '#uploadBtn'
			    ,url: '${path}/upload/uploadImg.action' //改成您自己的上传接口
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#mainImageId').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(jsonResult){
			      if(jsonResult.code == 0){
			    	  $('input[name="mainImage"]').val(jsonResult.data);
			      } else {
			        return layer.msg('上传失败');
			      }
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#demoText');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
			  });
			
			// layui监听下拉框选中事件
			form.on('select(filter)', function(data){
				console.log(data.elem); //得到select原始DOM对象
				console.log(data.value); //得到被选中的值
				console.log(data.othis); //得到美化后的DOM对象
				
				$.post(
					'${path}/product/selectSecondCategoryList.action',
					{'topCategoryId' : data.value},
					function(jsonResult) {
						console.log(jsonResult);
						var list = jsonResult.data;
						var html = ' <option value="">请选择</option>';
						$(list).each(function() {
							html +=  '<option value="'+this.id+'">'+this.name+'</option>';
						});
						$('#categoryId').html(html);
						form.render('select');// 刷新select选择框
					},
					'json'
				);
			}); 
		});
		
		function submitForm(){
			$.post(
				'${path}/product/insert.action',
				$('#formId').serialize(),
				function(jsonResult) {
					console.log(jsonResult);
					if (jsonResult.code == 0) {
						console.log(jsonResult);
						mylayer.okMsg(jsonResult.msg);
						
						//当你在iframe页面关闭自身时获得当前弹出框的index索引
		                var index = parent.layer.getFrameIndex(window.name);
	                     
	                     // js一个方法，定时器，1000毫秒之后自动执行function里面的代码
	                     setTimeout(function() {
	                         // 关闭弹出层
	                         parent.layer.close(index);
	                         // 刷新父页面
	                         window.parent.location.reload();
	                     }, 1000);
					} else {
						mylayer.errorMsg(jsonResult.msg);
					}
				},
				'json'
			);
		}
		
		KindEditor.ready(function(K) {
		    var kingEditorParams = {
		         afterBlur: function () { this.sync(); }
		    }
		    KindEditor.create('#detailId', kingEditorParams);
		});
	</script>
</body>
</html>